<template>
  <view class="article-detail">

    
    <!-- 文章内容 -->
    <view class="article-content" v-if="articleInfo">
      <view class="article-header">
        <text class="article-title">{{ articleInfo.name }}</text>
        <view class="article-meta">
          <text class="create-time">{{ articleInfo.create_time }}</text>
        </view>
      </view>
      
      <view class="article-body">
        <rich-text :nodes="articleInfo.content"></rich-text>
      </view>
    </view>
    
    <!-- 加载状态 -->
    <view class="loading-wrapper" v-else-if="loading">
      <u-loading-icon mode="spinner" size="40"></u-loading-icon>
      <text class="loading-text">加载中...</text>
    </view>
    
    <!-- 空状态 -->
    <view class="empty-wrapper" v-else>
      <u-empty text="文章不存在或已删除"></u-empty>
    </view>
  </view>
</template>

<script>
/**
 * 文章详情页面
 * @author 王勇程 <laughskydragon@qq.com>
 */
import { articleApi } from '@/api'

export default {
  data() {
    return {
      articleId: 0,
      pageTitle: '文章详情',
      articleInfo: null,
      loading: true
    }
  },
  
  onLoad(options) {
    this.articleId = parseInt(options.id) || 0
    this.pageTitle = decodeURIComponent(options.title || '文章详情')
    
    if (this.articleId > 0) {
      this.getArticleDetail()
    } else {
      this.loading = false
    }
  },
  
  methods: {
    // 获取文章详情
    async getArticleDetail() {
      try {
        this.loading = true
        const res = await articleApi.getArticleInfo({
          article_id: this.articleId
        })

        this.articleInfo = res
        uni.setNavigationBarTitle({
          title: res.name
        })
      } catch (error) {
        console.error('获取文章详情失败:', error)
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    // 格式化时间
    formatTime(timestamp) {
      if (!timestamp) return ''
      const date = new Date(timestamp * 1000)
      return date.toLocaleDateString()
    },
    

  }
}
</script>

<style scoped>
.article-detail {
  min-height: 100vh;
  background-color: #fff;
}

.article-content {
  padding: 30rpx;
}

.article-header {
  margin-bottom: 40rpx;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.article-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  display: block;
  margin-bottom: 20rpx;
}

.article-meta {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 24rpx;
}

.create-time {
  margin-right: 30rpx;
}

.article-body {
  line-height: 1.8;
  color: #333;
  font-size: 28rpx;
}

.loading-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.loading-text {
  margin-top: 20rpx;
  color: #999;
  font-size: 24rpx;
}

.empty-wrapper {
  padding: 100rpx 0;
}
</style>
